<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dth">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href="<%=path%>/CSS/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=path%>/JQuery/jquery-1.8.2.js"></script>
<%@ include file="/WEB-INF/JSP/ajax.jsp"%>
<script type="text/javascript"
	src="<%=path%>/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
.seachform li label {line-height: 45px;color: #444444}
.scinput {line-height: 10px;margin-top: 5px}
.scinput1 {margin-top: 5px;height: 30px;}
.scbtn {background: #57a0ff;border-radius: 20px;width: 110px;margin-top: 4px;height: 35px}
thead {background: #f2f2f2}
.tablelist2 th {height: 45px;background: none;}
.tablelist2 tr{height:45px;}
.tablelist2 tr th{height: 20px;border-left: 1px solid #dddee6;border-right: 1px solid #dddee6;color: #444444;text-align: center;}
.tou{background: #e4eafe}
.kh{border-bottom: 1px solid #dddee6;}
.shuju th{border-left: 1px solid #dddee6;border-right: 1px solid #dddee6;color: #787c88;text-align: center;}
.shuju:nth-child(odd){background: #ffffff}
.shuju:nth-child(even){background: #f3f5fb}
.shuju:last-child{border-bottom: 1px solid #dddee6;}
.shuju:HOVER {
	background: #fff6cd;
}
 .loading {
            margin: 100px 450px;
            display: block;
            width: 65px;
            height: 65px;
            border: 1px solid #ddd;
            border-radius: 5px;
            opacity: .7;
            background: url(../images/loading.gif) no-repeat;
        }
</style>
</head>
<body style="background: #f5f5f5;padding: 0 10px;">
	<div class="place" style="background: #f5f5f5; margin-top: 10px">
		<ul class="placeul">
			<li><a href="#">报表</a></li>
			<li><a href="#">财务报表</a></li>
			<li><a href="<%=path%>/DrivingSys/queryInsuranceCompensation/look.action">保险赔偿明细表</a></li>
		</ul>
	</div>

	<div class="rightinfo"
		style="background: #fff; border-radius: 10px; height: 45px;">

		<form action="<%=path%>/DrivingSys/outXls" class="form" method="post" >
			<ul class="seachform">
				<li><label>开始时间</label><input class="scinput1" name="beginTime"
											  type="text"
											  onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}',dateFmt:'yyyy-MM-dd'})"
											  id="datemin" class="input-text Wdate" style="width: 150px;"
											  value="${beginTime}"></li>
				<li><label>结束时间</label><input class="scinput1" name="endTime"
											  type="text"
											  onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',dateFmt:'yyyy-MM-dd'})"
											  id="datemax" class="input-text Wdate" style="width: 150px;"
											  value="${endTime}">
					<input type="hidden" name="xls" id="xls" value="">
					<input type="hidden" name="fileNames" value="考场收入统计表">
					<input type="hidden" id="stu">
				</li>
				<li><label>&nbsp;</label><input name="" type="button"
												class="scbtn" value="立即查询" id="cx"/></li>
                <shiro:hasPermission name="/outXlsInsuranceCompensation">
                    <li><label>&nbsp;</label><input onclick="chargeCss()" type="submit" id="dc"
                                                    class="scbtn" value="导出Excel" /></li>
                </shiro:hasPermission>
			</ul>
		</form>
	</div>

	<div style="width: 100%; overflow: auto; margin-bottom: 20px; margin-top: 30px; background: #fff; box-shadow: 0 0 10px #f2f2f2; min-height: 600px" class="div">
		<table class="tablelist2" style="width: 100%;"id="table1">
			<!--  <tr class="tou">
				<th rowspan="2">记账日期</th>
				<th rowspan="2">凭证号</th>
				<th rowspan="2">摘要</th>
				<th rowspan="2">借方</th>
				<th rowspan="2">贷方</th>
				<th colspan="2" class="kh">余额</th>
				<th rowspan="2">退保时间</th>
				<th rowspan="2">退保凭证号</th>
				<th rowspan="2">退保金额</th>
				<th rowspan="2">备注</th>
			</tr>
			<tr class="tou">
				<th>方向</th>
				<th>金额</th>
			</tr> -->
		</table>
	</div>
	<div id="hidden" style="display: none">
	
	</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
	$('#table1').html("<tr><td class='loading'></td></tr>");
	var startTime = "${beginTime}";
	var endTime = "${endTime}";
	var str =''
		str += '<tr style="display: none;" class="tou">'
		str += '<th style="text-align: center;height:30px;" colspan= "11">人民保险赔偿收付明细表</th></tr>'
		str += '<tr style="display: none;" class="tou">'
	    str += '<th style="text-align: center;height:20px;" colspan="2">单位名称：</th><th colspan="8"></th><th style="width:19px">单位：元</th></tr>'
		str += '<tr class="tou tou2"><th rowspan="2">记账日期</th><th rowspan="2">凭证号</th><th rowspan="2">摘要</th><th rowspan="2">借方</th>'
		str += '<th rowspan="2">贷方</th><th colspan="2" class="kh">余额</th><th rowspan="2">退保时间</th><th rowspan="2" class="tbpzh">退保凭证号</th>'	 
		str += '<th rowspan="2">退保金额</th><th rowspan="2" class="tbsj">备注</th></tr>'
		str += '<tr class="tou"><th>方向</th><th>金额</th></tr>'
		$("#table1").html(str)
}) 

//改变样式
function chargeCss(){
	$("#hidden").html($(".div").html())
	$("#hidden table .tou2 th:nth-child(7)").css("width","15px");
	$("#hidden table .tou2 th:nth-child(1)").css("width","16px");
	$("#hidden table .tou2 th:nth-child(8)").css("width","16.5px"); 
	$("#hidden table .tou2 th:nth-child(9)").css("width","17px"); 
	$("#hidden table .tou2 th:nth-child(10)").css("width","18px");
	
	$("#hidden table tr th").css("font-weight","bold"); 
	$("#hidden table .tou th").css("text-align","center");
	 
	$("#hidden .shuju th:odd").css("text-align","center");
	$("#hidden .shuju th:even").css("text-align","center");
	
	$("#hidden .shuju th").css("font-size","11pt");
	$("#hidden .tou th").css("font-size","11pt");
	$("#hidden table tr .tbpzh").css("width","16px");
	
	$("#hidden .tou th").css("background","rgb(228,234,254)");
	
	$("#xls").val($("#hidden").html())
	
 }

$("#cx").click(function(){
	var startTime = $("#datemin").val();
	var endTime = $("#datemax").val();
	if(startTime == null || startTime == ''){
		alert("开始时间不能未空")
		return false
	}
	if(endTime == null || endTime == ''){
		alert("结束时间不能未空")
		return false
	}
	$('#table1').html("<tr><td class='loading'></td></tr>");
	var str =''
	str += '<tr style="display: none;" class="tou">'
	str += '<th style="text-align: center;height:30px;" colspan= "11">人民保险赔偿收付明细表</th></tr>'
	str += '<tr style="display: none;" class="tou">'
    str += '<th style="text-align: center;height:20px;" colspan="2">单位名称：</th><th colspan="8"></th><th style="width:19px">单位：元</th></tr>'
	str += '<tr class="tou tou2"><th rowspan="2">记账日期</th><th rowspan="2">凭证号</th><th rowspan="2">摘要</th><th rowspan="2">借方</th>'
	str += '<th rowspan="2">贷方</th><th colspan="2" class="kh">余额</th><th rowspan="2">退保时间</th><th rowspan="2" class="tbpzh">退保凭证号</th>'	 
	str += '<th rowspan="2">退保金额</th><th rowspan="2" class="tbsj">备注</th></tr>'
	str += '<tr class="tou"><th>方向</th><th>金额</th></tr>'
	$("#table1").html(str)
})

</script>
</html>